<template>
  <div id="app">
    <header>
      <img alt="Vue logo" class="logo" src="/images/sandau.webp" width="80" height="80" />
      <span class="header-text">工单管理系统</span> <!-- 添加文字 -->
    </header>

    <div class="sidebar-container" v-if="!isLoginPage">
      <Sidebar :user-role="userRole" /> <!-- 传递用户角色 -->
    </div>

    <main :class="{ 'main-content': true, 'with-sidebar': !isLoginPage }">
      <!-- 使用 v-slot 和 <component> 实现缓存 -->
      <router-view v-slot="{ Component }">
        <keep-alive v-if="route.meta.keepAlive">
          <component :is="Component" @login-success="handleLoginSuccess" />
        </keep-alive>
        <component v-else :is="Component" @login-success="handleLoginSuccess" />
      </router-view>
    </main>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import Sidebar from './components/Sidebar.vue'; // 引入 Sidebar 组件

const route = useRoute(); // 获取当前路由
const isLoginPage = computed(() => route.name === 'Login'); // 判断当前路由是否为登录页
const userRole = ref(''); // 用于存储用户角色

const handleLoginSuccess = (role) => {
  userRole.value = role; // 更新用户角色
};
</script>

<style scoped>
html, body {
  margin: 0; /* 去掉默认的外边距 */
  padding: 0; /* 去掉默认的内边距 */
  height: 100%; /* 确保 html 和 body 高度为 100% */
  width: 100%;
}

#app {
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column; /* 使子元素垂直排列 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 水平起始对齐 */
  background-color: #f8f9fa; /* 可选：设置背景颜色 */
  z-index: 10; /* 确保 header 在最上层 */
  width: 100vw;
  padding: 10px; /* 添加一些内边距 */
}

.logo {
  display: block;
  margin-right: 10px; /* logo 和文字之间的间距 */
}

.header-text {
  font-size: 2.2rem; /* 文字大小 */
  font-weight: bold; /* 文字加粗 */
}

.sidebar-container {
  width: 220px; /* 侧边栏宽度 */
  height: calc(100vh - 80px); /* 计算侧边栏高度，减去 header 的高度 */
  position: fixed;
  top: 80px;
  left: 0; /* 靠左对齐 */
  background-color: #f4f4f4; /* 侧边栏背景颜色 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.main-content {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 使容器充满整个视口 */
  background-color: #f0f2f5; /* 背景颜色 */
}

.with-sidebar {
  position: fixed;
  top: 80px;
  left: 220px; /* 侧边栏宽度 */
  right: 0;
  width: calc(100% - 220px);
  bottom: 0;
  flex-direction: column;
  padding: 20px; /* 添加一些内边距 */
  overflow-y: auto; /* 允许垂直滚动 */
  height: 100%;
  background-color: #f0f2f5; /* 背景颜色 */
}
</style>